<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div style="background: #fff; height: 20px; color: #000">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 输入框 -->
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="ruleForm"
          class="demo-form-inline"
          label-width="80px"
        >
          <el-form-item label="目录名称">
            <el-input v-model="ruleForm.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="ruleForm.state" placeholder="请选择">
              <el-option label="已启用" value="1"></el-option>
              <el-option label="已禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="eliminate">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item> </el-form-item>
        </el-form>

        <div style="text-align: right; margin-top: -58px; margin-bottom: 20px">
          <el-button icon="el-icon-edit" type="success" @click="onSubmit"
            >新增目录</el-button
          >
        </div>
        <!-- 数据统计条数 -->
        <div class="shuju">
          <i class="el-icon-info"></i
          ><span style="margin-left: 10px">数据一共{{ total }}条</span>
        </div>
        <!-- 表格区域 -->
        <el-table :data="directorysList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
              <template slot-scope="scope">{{scope.row.addDate | formTime}}</template>
               </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              {{ scope.row.state == 1 ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                :underline="false"
                @click="state(scope.row)"
                style="margin-right: 10px"
                type="primary"
                >{{ scope.row.state == 1 ? "启用" : "禁用" }}</el-link
              >
              <el-link
                :underline="false"
                :disabled="scope.row.state == 1"
                @click="detail(scope.row)"
                style="margin-right: 10px"
                type="primary"
                >修改</el-link
              >
              <el-link
                :underline="false"
                :disabled="scope.row.state == 1"
                style="margin-right: 10px"
                type="primary"
                @click="remove(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码区域 -->
        <div class="block" style="text-align: right">
          <el-pagination
            background
            :current-page="ruleForm.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="ruleForm.pagesize"
            layout="  prev, pager, next,sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
        <!-- 新增弹框插件 -->
        <el-dialog
          v-if="dialogVisible"
          :title="isEdit ? '新增目录' : '修改目录'"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose"
        >
          <span>
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="80px"
            >
              <el-form-item label="所属学科" prop="subjectID">
                <el-select
                  @focus="getSubjects()"
                  v-model="ruleForm.subjectID"
                  :placeholder="isEdit ? '请选择' : 'ruleForm.subjectID'"
                >
                  <el-option
                    clearable
                    v-for="item in subjects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目录名称" prop="directoryName">
                <el-input v-model="ruleForm.directoryName"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" @click="addSubject()">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
// 导入时间格式化
import dayjs from 'dayjs'
// 导入获取所有目录列表/添加目录/修改目录/删除目录api
import {
  list,
  add,
  changeState,
  detail,
  update,
  remove
} from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys',
  components: {},
  data () {
    // 兜底验证规则
    const validateDirectory = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请输入目录名称'))
      }
    }

    const validateSubject = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback(new Error('请选择所属学科'))
      }
    }

    return {
      ruleForm: {
        subjectID: null, // 学科ID
        directoryName: null, // 目录名称
        id: null, // 数据id
        state: null,
        page: 1, // 当前页数
        pagesize: 10 // 每页显示数据的数量
      },

      // 校验规则
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { validator: validateDirectory, trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' },
          { validator: validateSubject, trigger: 'blur' }
        ]
      },

      index: 0, // 序号
      directorysList: [], // 获取的目录列表
      subjects: [], // 获取学科列表
      total: 0, // 数据总条数
      dialogVisible: false, // 控制新增显示隐藏
      isEdit: true // 控制新增还是修改
    }
  },

  filters: {
    formTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh-mm-ss')
    }

  },

  created () {
    getCompanys()
    getQuestion()

    // 获取目录列表
    this.getList()
  },
  methods: {
    async getSubjects () {
      const res1 = await simple()
      this.subjects = res1.data
    },

    // 删除功能
    async remove (row) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return
      await remove(row)
      if (this.directorysList.length === 1) {
        this.ruleForm.page--
        if (this.ruleForm.page < 1) {
          this.ruleForm.page = 1
        }
      }
      // 成功提示
      this.$message.success('删除成功')
      // 刷新页面
      this.getList()
    },

    // 点击修改按钮,调用获取目录详情api 渲染弹框
    async detail (obj) {
      this.isEdit = false
      this.dialogVisible = true
      const res = await detail(obj)
      this.ruleForm.subjectID = res.data.subjectID
      this.ruleForm.directoryName = res.data.directoryName
      this.ruleForm.id = obj.id
    },

    // 改变启用或者禁用状态
    async state (stateId) {
      await changeState({ id: stateId.id, state: !stateId.state * 1 })
      // 更改完状态 从新渲染列表
      // 获取目录列表
      this.getList()
      this.$message.success('操作成功')
    },

    // 新增目录兜底验证
    async addSubject () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        // 判断是修改还是新增
        if (!this.isEdit) {
          await update(this.ruleForm)
          this.isEdit = true
        } else {
          // 否则走新增
          const res = await add(this.ruleForm)
          this.ruleForm = res.data
          // this.getList()
        }
        this.$message.success('操作成功')
        this.ruleForm = {
          subjectID: null, // 学科ID
          directoryName: null, // 目录名称
          id: null, // 数据id
          state: null,
          page: 1, // 当前页数
          pagesize: 10 // 每页显示数据的数量
        }
        this.getList()
        this.dialogVisible = false
      })
    },

    // 弹框
    handleClose () {
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
      this.ruleForm = {
        subjectID: '',
        directoryName: ''
      }
    },

    // 点击搜索
    search () {
      this.getList()
    //   const lists = await list(this.ruleForm)
    //   this.directorysList = lists.data.items
    //   this.ruleForm.page = 1
    },

    // 点击清除,清空出入框
    eliminate () {
      this.ruleForm = {
        subjectID: null, // 学科ID
        directoryName: null, // 目录名称
        id: null, // 数据id
        state: null,
        page: 1, // 当前页数
        pagesize: 10 // 每页显示数据的数量
      }
      this.getList()
    },

    // 获取目录列表
    async getList () {
      const lists = await list(this.ruleForm)
      this.directorysList = lists.data.items
      this.total = lists.data.counts
    },

    // 点击新增目录 获取简单学科列表
    async onSubmit () {
      this.isEdit = true
      // 赋值给 subjects 进行列表渲染
      const res = await simple()
      this.subjects = res.data
      this.dialogVisible = true
    },

    // 每页显示条数 改变时会触发
    handleSizeChange (size) {
      this.ruleForm.pagesize = size
      this.getList()
    },

    // 页面发生变化 改变时会触发
    handleCurrentChange (page) {
      this.ruleForm.page = page
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.shuju {
  font-size: 12px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  color: #909399;
  background-color: #f4f4f5;
  border-radius: 5px;
  margin-bottom: 15px;
}
.block {
  margin-top: 15px;
}
.el-pagination.is-background {
  /* margin-right: 10px; */
  padding-left: 1000px;
}

.el-select.el-select--medium {
  width: 264px;
}
.el-dialog__footer {
  padding-left: 205px;
  margin-right: -185px;
}
</style>
